<template>
  <div>
    AChild
    <!-- <p>{{ a }}</p>
    <p>{{ $attrs.b }}</p>
    <button @click="update">更新a</button> -->

    <!-- <BChild
      :a="a"
      :b="b"
      :c="c"
      @update="$emit('update')"
      @click="$emit('click')"
    /> -->

    <BChild v-bind="$attrs" v-on="$listeners" />

    <!-- <BChild
      v-bind="{
        a: $attrs.a,
        b: $attrs.b,
        c: $attrs.c,
      }"
      v-on="{
        事件名称: 回调函数, 
        事件名称: 回调函数, 
        事件名称: 回调函数, 
      }"
    /> -->
  </div>
</template>

<script>
import BChild from "./B.vue";

export default {
  name: "AChild",
  components: {
    BChild,
  },
  // props: {
  //   a: Number,
  //   b: Number,
  //   c: Number,
  // },
  // mounted() {
  //   // $attrs 未声明接受的属性数据
  //   console.log(this.a, this.b, this.c);
  //   console.log(this.$attrs); // {b: 2, c: 3}
  //   console.log(this.$listeners); // 所有自定义事件的回调函数（DOM事件回调函数没有）
  // },
  // methods: {
  //   update() {
  //     // this.$emit("update"); // 触发事件，执行回调函数
  //     this.$listeners.update(); // 直接调用回调函数
  //   },
  // },
};
</script>

<style></style>
